<template>
    <div>
        <div v-if="error" class="alert alert-danger" show>{{ error }}</div>
        <div v-else>
            <span v-if="loading">
                <b-card>
                    <loading-span message="Loading installed repository details" />
                </b-card>
            </span>
            <div v-else>
                <RepositoryDetails :repo="toolshedRepository" :toolshedUrl="repo.tool_shed_url" />
            </div>
        </div>
    </div>
</template>
<script>
import { getAppRoot } from "onload/loadConfig";
import { Services } from "../services.js";
import RepositoryDetails from "../RepositoryDetails/Index.vue";
import LoadingSpan from "components/LoadingSpan";

export default {
    props: ["repo"],
    components: {
        LoadingSpan,
        RepositoryDetails
    },
    data() {
        return {
            loading: true,
            toolshedRepository: null,
            error: null
        };
    },
    created() {
        this.root = getAppRoot();
        this.services = new Services({ root: this.root });
        this.load();
    },
    methods: {
        load() {
            this.loading = true;
            this.services
                .getRepositoryByName(this.repo.tool_shed_url, this.repo.name, this.repo.owner)
                .then(toolshedRepository => {
                    this.toolshedRepository = toolshedRepository;
                    this.loading = false;
                })
                .catch(error => {
                    this.error = error;
                });
        }
    }
};
</script>
